<template>
  <transition name="fade" appear>
    <div class="create_room" v-drag>
      <div class="title">
        <span>创建房间</span>
        <off-btn  @off="$emit('off')"></off-btn>
      </div>
      <div class="form" @mousedown.stop>
        <div class="room_name">
          <span>房主：{{room_name}}</span>
        </div>
        <div class="room_title">
          <span>标题：</span>
          <input type="text" maxlength="10" v-model="formdata.title">
        </div>
        <div class="room_channel">
          <span>房间频道：</span>
          <select v-model="formdata.channel">
            <option value="">请选择</option>
            <option v-for="(item,index) in channels.slice(1)" :key="index" :value="item.text">{{item.text}}</option>
          </select>
        </div>
        <div class="password">
          <span>房间加密：</span>
          <input type="checkbox" v-model="passwordKey" class="key">
          <input type="number" v-model="formdata.password" class="val" v-if="passwordKey">
        </div>
        <button @click="createRoom" class="btn">创建</button>
      </div>
    </div>
  </transition> 
</template>

<script>
import { mapActions } from 'vuex';
import offBtn from "../../info/offBtn.vue"
export default {
  name: 'Createroom',

  data() {
    return {
      formdata: {
        title: '', // 房间标题
        channel: '', // 房间类型
        password: '', // 房间密码
      },
      passwordKey: false, // 密码锁
    };
  },

  watch: {
    passwordKey(){
      this.formdata.password = ''
    },
    "formdata.password": {
      handler(newVal,oldVal){
        if(newVal.length > 6){
          this.formdata.password = oldVal
        }
      }
    }
  },

  props:{
    // 房间分类数据
    channels: Array
  },

  computed: {
    // 返回房主名
    room_name(){
      return  this.$store.state.userinfo ? this.$store.state.userinfo.name : ''
    }
  },

  mounted() {
    
  },

  methods: {
    // 创建房间
    createRoom(){
      if(this.passwordKey && this.formdata.password.length != 6){
        this.showHint({title: '请设置6位密码数字!', isFlag: false})
        return
      }
      if(this.formdata.title.trim() != '' && this.formdata.channel.trim() != ''){
        this.$api.createChatRoom(this.formdata).then(res => {
          if(res instanceof Object){
            const routeData = this.$router.resolve({
              path: '/Room',
              query: {id: res.data.chatid,password: this.formdata.password}
            })
            window.open(routeData.href, '_blank')
            this.$emit('off')
          }else{
            this.showHint({title:res,isFlag:false})
          }
        })
      }else if(this.formdata.title.trim() == ''){
        this.showHint({title:'标题不能为空',isFlag:false})
      }else if(this.formdata.channel.trim() == ''){
        this.showHint({title:'请选择频道',isFlag:false})
      }else{
        this.showHint({title:'服务器繁忙',isFlag:false})
      }
    },
    ...mapActions(['showHint'])
  },

  components: {
    offBtn
  }
};
</script>

<style scoped>
.create_room{
  position: fixed;
  max-width: 320px;
  width: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: white;
  z-index: 99;
  border: 1px solid gray;
  box-shadow: 0 0 4px gray;
  font-size: 0.7rem;
}
.create_room input{
  border: 1px solid gray;
  padding-left: 3px;
  transition: all .3s ease-in-out;
  border-radius: 2px;
}
.create_room input:focus{
  border: 1px solid rgb(73, 73, 255);
}
.create_room .title{
  width: 100%;
  height: 30px;
  background-color: green;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.create_room .form{
  display: flex;
  flex-direction: column;
  height: 200px;
  justify-content: space-between;
  padding: 20px;
}
.create_room .password{
  display: flex;
  align-items: center;
  height: 30px;
}
.create_room .password .key{
  margin-right: 5px;
  cursor: pointer;
}
.create_room .password .val{
  width: 100px;
}
.create_room .password .val::-webkit-inner-spin-button{
  -webkit-appearance: none;
}
.create_room .btn{
  width: 100%;
  height: 30px;
  background-color: green;
  color: white;
  cursor: pointer;
  opacity: 0.7;
  letter-spacing: 2px;
  transition: all .3s ease;
}
select,input{
  outline: none;
}
select{
  text-align: center;
  font-size: 0.6rem;
  padding: 3px;
}
.room_title input{
  min-width: 200px;
}
.create_room .btn:hover{
  opacity: 1;
}
</style>